<template>
  <div class="center_bottom">
    <el-row type="flex" justify="space-around" align="middle" style="margin-top: 10px;">
        <span class="filter-title">监测水量</span>
        <span class="filter-tab active"  v-for="item in tab">{{item.label}}</span>
    </el-row>
    <div class="bubble flex justify-center align-center">
        <img src="../../assets/img/u179.png"/>
    </div>
    <div style="height: 280px">
        <Echart
            :options="options"
            id="use-water-statistics"
            class="use-water-statistics"></Echart>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
      tab: [
        {label: '今日', value: 'week'},
        {label: '本月', value: 'month'},
        {label: '本年', value: 'year'}
      ],
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        this.init();
    },
    init() {
      this.options = {
        // backgroundColor: '#fff',
        title: {
            text: "水位信息",
            left: "3%",
            top: "0",
            textStyle: {
                color: "#000",
                fontSize: 16,
                fontWeight: 500
            }
        },
        color: ['#00eaff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
          top: '25%',
          right: '7%',
          left: '10%',
          bottom: '10%',
        },
        
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['24:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
            },
            axisLabel: {
                color: '#333',
                textStyle: {
                    fontSize: 12
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#c9fcff'
                }
            },
        },
        yAxis: {
            type: 'value',
            name: '单 位：m',
            max: 750,
            min: 0,
            interval: 150,
            nameTextStyle: {
              color: '#333'
            },
            axisLabel: {
                color: '#333',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#c9fcff'
                }
            }
        },
        series: [
            {
                name: '水位信息',
                type: 'line',
                smooth: true,
                symbol: 'none',
                data: [180,354,334,134,335,453,556, 456, 440]
            }
        ]
      };
    },
    selectFilterTab(item) {
        this.currentActive = item.value;
    }
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
    width: 100%;
    height: 100%;
    .echarts_bottom {
        width: 100%;
        height: 100%;
    }
    .filter-tab {
        padding: 3px 16px;
        border: 1px solid #169bd5;
        margin-left: 15px;
        border-radius: 6px;
        cursor: pointer;
        &:first-child {
            margin-left: 25px;
        }
        &.active {
            background: #169bd5;
            color: #fff;
        }
    }
    .filter-title{
        font-size: 16px;
        color: #333333;
    }
    .bubble {
        width: 59px;
        height: 59px;
        background: url(../../assets/img/u178.png) no-repeat center;
        background-size: 100%;
        margin-left: 20px;
        margin-top: 20px;
        margin: 20px;
        img {
            width: 26px;
            height: 24px;
        }
    }
}
</style>
